import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Picker, Card } from '@ant-design/react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useRouter, router } from 'expo-router';

const deviceData = [
    { value: '智能门锁', label: '智能门锁' },
    { value: '摄像头', label: '摄像头' },
    { value: '灯', label: '灯' },
    { value: '空调', label: '空调' },
    { value: '空气净化器', label: '空气净化器' },
    { value: '加湿器', label: '加湿器' },
    { value: '窗帘', label: '窗帘' },
    { value: '洗衣机', label: '洗衣机' },
    { value: '扫地机器人', label: '扫地机器人' },
    { value: '冰箱', label: '冰箱' },
    { value: '洗碗机', label: '洗碗机' },
    { value: '热水器', label: '热水器' },
    { value: '排气扇', label: '排气扇' },
    { value: '电视', label: '电视' },
    { value: '智能音箱', label: '智能音箱' },
    { value: '温湿度计', label: '温湿度计' },
    { value: '人体传感器', label: '人体传感器' },
    { value: '烟雾报警器', label: '烟雾报警器' },
];

interface AddDeviceCardProps {
    onDeviceSelect: (selectedValue: string) => void;
}

// 组件名为 AddDeviceCard
const AddDeviceCard: React.FC<AddDeviceCardProps> = ({ onDeviceSelect }) => {
    const [visible, setVisible] = useState(false);

const handleOk = (value: any) => {
    if (value && value[0]) {
        const selectedValue = String(value[0]);
        onDeviceSelect(selectedValue); // 保留原有回调

        // 新增：跳转到 NewDevice 页面，并传递设备类型参数
        router.push({
            pathname: '/NewDevice', // 对应 app/NewDevice/index.tsx
            params: { deviceType: selectedValue }, // 将选择的值作为参数传递过去
        });
    }
    setVisible(false);
};

    return (
        <>
            {/* 整个组件的结构和样式 */}
            <TouchableOpacity onPress={() => setVisible(true)} activeOpacity={0.7}>
                <Card style={styles.card}>
                    <View style={styles.iconWrapper}>
                        <FontAwesome name="plus-circle" size={60} color="#888" />
                        <Text style={{ color: "#888", marginTop: 8 }}>点击添加设备</Text>
                    </View>
                </Card>
            </TouchableOpacity>

            {/* 功能部分：隐藏的滚轮选择器 */}
            <Picker
                data={deviceData}
                cols={1}
                visible={visible}
                onOk={handleOk}
                onDismiss={() => setVisible(false)}
            />
        </>
    );
}

const styles = StyleSheet.create({
    card: {
        width: 160,
        height: 160,
        borderRadius: 20,
        overflow: 'hidden',
        elevation: 2,
        backgroundColor: '#fff',
        alignSelf: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        justifyContent: 'center',
        alignItems: 'center',
    },
    iconWrapper: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

// 默认导出也修改为新的组件名
export default AddDeviceCard;

